<template>
    <div class="variableediting">
        <div class="topcon">
                <div class="left-nav">
                     <div :class="['nav-item', {'active':tabindex == 1}]" @click="qiehuanTabIndex(1)">变量实时值</div>
                     <div :class="['nav-item', {'active':tabindex == 2}]"  @click="qiehuanTabIndex(2)">通道设备状态</div>
                </div>
                <div class="right-btn">
                    <!-- <div class="btn-item" @click="connect">连接</div>
                    <div class="btn-item" @click="sendMessage">发送消息</div>
                    <div class="btn-item" @click="disconnect">断开连接</div> -->
                </div>
        </div>
        <div class="con" v-show="tabindex == 1">
             <div class="left-tree">
                 <el-scrollbar style="height:calc(100% - 30px);width: 100%;">
                    <el-tree class="filter-tree" :data="dataList"  
                        :expand-on-click-node="true" 
                        default-expand-all
                        node-key="myid" :props="defaultProps" :highlight-current='true'  ref="tree" 
                        @node-click='treeClick'
                    >
                    <template #default="{ node }">
                        <div class="custom-tree-node">
                            <div class="flexitem">
                                 <img src="../assets/btnImg/2.0.png" alt="" v-if="node.data.level == 1">
                                 <img src="../assets/btnImg/2.1.png" alt="" v-if="node.data.level == 3">
                                 <img src="../assets/btnImg/group.png" alt="" v-if="node.data.level == 2">
                                 {{ node.label }}
                            </div>
                        </div>
                    </template>
                    </el-tree>
                    </el-scrollbar>
             </div>
             <div class="right-table"  style="padding-right:12px">
                 <div class="top-search">
                     <div class="search-con">
                        <div class="search-item"> 
                                    <div class="leftname">变量名称</div>
                                    <el-input v-model="variableName" style="width:200px" />
                         </div>
                         <div class="search-item"> 
                                    <div class="leftname">数据类型</div>
                                    <el-select v-model="mydata_type" placeholder="请选择" style="width:200px" clearable>
                                                      <el-option
                                                        v-for="item in optionsType"
                                                        :key="item.value"
                                                        :label="item.name"
                                                        :value="item.value">
                                                        </el-option>
                                    </el-select>
                         </div>
                         <div class="btn-item" @click="searchfnname">搜索</div>
                     </div>
                 </div>
                 <div class="mi-table" style="height:calc(100% - 76px);margin-top:12px">
                    <el-table :data="leftTable" height="100%" stripe  style="width: 100%;" >
                                        <el-table-column type="index"  width="90" label="序号" align="center"> </el-table-column>
                                        <el-table-column prop="data_number"  width="120" label="点号" align="center"> </el-table-column>
                                        <el-table-column prop="name"  label="变量名称" min-width="180"> </el-table-column>
                                        <!-- <el-table-column prop="quanming" min-width="140" label="变量全名"> </el-table-column> -->
                                        <el-table-column prop="mydata_type" width="180" label="数据类型"></el-table-column>
                                        <el-table-column prop="coefficient" width="120" label="转换系数">  </el-table-column>
                                        <!-- <el-table-column prop="fangwen" width="120" label="模拟值">  </el-table-column> -->
                                        <el-table-column prop="value" width="200" label="实时值"> 
                                            <template #default="{row}">
                                                <!--  status-->
                                                    <div style="color:green" v-if="row.status == 1">{{(row.value)}}</div>
                                                    <div style="color:red" v-if="row.status === 0">{{(row.value)}}</div>
                                                    <div v-if="row.status != 0 && row.status != 1">{{(row.value)}}</div>
                                                </template>
                                        </el-table-column>
                                        <el-table-column  width="120" label="通讯状态" align="center"> 
                                             <template #default="{row}">
                                                <!--  status-->
                                                    <div class="mysort" v-show="row.status == 1" style="color:green">正常</div>
                                                    <div class="mysort" v-show="row.status === 0" style="color:red">异常</div>
                                                </template>
                                        </el-table-column>
                                        <el-table-column prop="nowTime" width="160" label="采集时间"> </el-table-column>
                                        <el-table-column prop="channel_number" width="160" label="通道ID"> </el-table-column>
                                        <el-table-column prop="device_number" width="160" label="设备ID"> </el-table-column>
                    </el-table>
                </div>
                <div class="bot-btn">
                     <el-scrollbar style="height:100%;width: 100%;">
                           <div class="scr-div">
                            <div class="left-btn">
                            </div>
                            <div class="right-paging">
                                <el-pagination @size-change="handleSizeChangejiao" @current-change="handleCurrentChangejiao" background
                                        :current-page="currentPage" :page-sizes="[20]" :page-size="20"
                                        layout="total, sizes, prev, pager, next" :total="total">
                                        </el-pagination>
                            </div>
                           </div>
                      </el-scrollbar>
                </div>
               
             </div>
             
        </div>
        <div class="con" v-show="tabindex == 2">
            <div class="left-tree">
                 <el-scrollbar style="height:calc(100% - 30px);width: 100%;">
                    <el-tree class="filter-tree" :data="dataListChannel"  
                        :expand-on-click-node="true" 
                        default-expand-all
                        node-key="myid" :props="defaultProps" :highlight-current='true'  ref="tree" 
                        @node-click='treeClickChannel'
                    >
                    <template #default="{ node }">
                        <div class="custom-tree-node">
                            <div class="flexitem">
                                 <img src="../assets/btnImg/2.0.png" alt="" v-if="node.data.level == 1">
                                 <img src="../assets/btnImg/2.1.png" alt="" v-if="node.data.level == 3">
                                 <img src="../assets/btnImg/group.png" alt="" v-if="node.data.level == 2">
                                 {{ node.label }}
                            </div>
                        </div>
                    </template>
                    </el-tree>
                    </el-scrollbar>
             </div>
            <div class="right-table">
                    <div class="channelstate">
                        <span class="leftname">当前通道状态：</span>
                        <div class="mysort" v-show="this.channelnowDeviceItem.statusValue == 1" style="color:green">正常</div>
                        <div class="mysort" v-show="this.channelnowDeviceItem.statusValue === 0" style="color:red">异常</div>
                        <span class="leftname" style="margin-left:20px">时间：</span>
                        <div>{{this.channelnowDeviceItem.nowTime}}</div>

                    </div>
                    <div class="lines"></div>
                    <!-- <div class="top-search">
                            <div class="search-con">
                                <div class="search-item"> 
                                    <div class="leftname">设备名称</div>
                                    <el-input v-model="versionsName" style="width:200px" />
                                </div>
                                <div class="search-item"> 
                                    <div class="leftname">设备ID</div>
                                   <el-select v-model="versionsName" style="width:170px">
                                                <el-option
                                                      v-for="item in data_bitsList"
                                                      :key="item.value"
                                                      :label="item.label"
                                                      :value="item.value"
                                                 ></el-option>
                                            </el-select>
                                </div>
                                <div class="search-item"> 
                                    <div class="leftname">当前状态</div>
                                    <el-select v-model="versionsName" style="width:200px">
                                                <el-option
                                                      v-for="item in data_bitsList"
                                                      :key="item.value"
                                                      :label="item.label"
                                                      :value="item.value"
                                                 ></el-option>
                                            </el-select>
                                </div>
                                    <div class="btn-item">搜索</div>
                                    <div class="btn-item item1">重置</div>
                            </div>
                    </div>
                    <div class="lines"></div> -->
                    <div class="mi-table" style="height: calc(100% - 86px);padding:0px 12px;margin-left: 0px;">
                            <el-table :data="channelDeviceTable" max-height="100%" stripe  style="width: 100%;" >
                                  <el-table-column type="selection" width="55" align="center"> </el-table-column>
                                  <el-table-column type="index"  width="90" label="序号" align="center"> </el-table-column>
                                  <el-table-column prop="device_name"   label="设备名称" align="center"> </el-table-column>
                                  <el-table-column  width="120" label="通讯状态" align="center"> 
                                        <template #default="{row}">
                                            <div class="mysort" v-show="row.value == 1" style="color:green">正常</div>
                                            <div class="mysort" v-show="row.value === 0" style="color:red">异常</div>
                                            </template>
                                        </el-table-column>
                                  <el-table-column prop="nowTime" width="160" label="采集时间"> </el-table-column>
                                  <el-table-column prop="device_number" width="200" label="设备ID"> </el-table-column>
                                           
                            </el-table>
                    </div>
                    <div class="bot-btn">
                     <el-scrollbar style="height:100%;width: 100%;">
                           <div class="scr-div">
                            <div class="left-btn">
                            </div>
                            <div class="right-paging">
                                <el-pagination @size-change="handleSizeChangejiao" @current-change="channelhandleCurrentChangejiao" background
                                        :current-page="channelcurrentPage" :page-sizes="[20]" :page-size="20"
                                        layout="total, sizes, prev, pager, next" :total="channeltotal">
                                </el-pagination>
                            </div>
                           </div>
                      </el-scrollbar>
                </div>
                     
             </div>
        </div>
        <div class="el-loading-mask" v-show="isMask">
             <div class="el-loading-spinner"><svg viewBox="25 25 50 50" class="circular"> <circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg></div>
        </div>
      

    </div>
</template>

<script>
import {findchannelconfigAll,transmitChannelList} from "../api/dataComparisonApi";
import {getDeviceList,getVariablesDevice,commondatatype} from "../api/Interface";
import { useCounterStore } from '../stores/counter'
import { onBeforeUnmount , ref} from "vue";
export default {
   setup() {
    const ws = ref(null);
    const changshi = ref(null);
    
    onBeforeUnmount(() => {
      clearTimeout(changshi.value)
      if (ws.value) {
          const params = 'close';
          ws.value.send(params);
          ws.value.close();
      }
     
      
    });
    return {
     ws,
     changshi,
    };
   },

    data() {
        return {
            mydata_type:"",
            isMask:false,//缓冲
            deviceArr:[],//设备数据
            //  optionsType:[],//数据类型
            tabindex:1,
             total:0,
            currentPage:1,
            channelcurrentPage:1,
            channeltotal:0,
            data_bitsList:[],
            channelDeviceTable:[],
            channelDeviceTableCopy:[],
            channelTotal:0,
            leftTable:[],
            leftTableCopy:[],
            bigleftTableCopy:[],
            optionsFang:[],
            versionsName:"",
            dataList:[
            {
                'treeName':"数据采集",
                'children':[
                    {
                     'treeName':"采集通道",
                     'children':[],
                    },
                    {
                     'treeName':"转发通道",
                     'children':[],
                    },
                ],
            }
            ],
            dataListChannel:[],
            dataListCopy:[
            {
                'treeName':"数据采集",
                'channels':[
                    {
                     'treeName':"采集通道",
                     'channels':[],
                    },
                    {
                     'treeName':"转发通道",
                     'channels':[],
                    },
                ],
            }
            ],
            nowDeviceItem:{},//树形结构
            channelnowDeviceItem:{
                statusValue:"",
                nowTime:""
            },//树形结构
            defaultProps: {
                children: 'channels',
                label: 'treeName',
            },
            addDecive:false,//变量编辑
            checked:true,
            addDecivebian:false,//新增变量
            piliangEdit:false,//批量修改
            deviceDataAll:[],//集合返回的设备数据
            //  ws: null,
             message: null,
             caijiShebei:[],
             panduanFlag:false,
             newbaseUrl:"",
             danclick:false,
             variableName:"",//变量名称搜索
        };
    },

    mounted() {
      var currentUrl = window.location.href;
        var baseUrl = currentUrl.substring(0, currentUrl.indexOf('/#'));
        // 获取端口号
      var port = window.location.port;
      // 去掉端口号
      if (port !== '') {
      baseUrl = baseUrl.replace(':' + port, '');
      }
      // 使用正则表达式去掉开头的'//'
     this.newbaseUrl =  baseUrl.replace(/^(https?:\/\/)/, '');

        // 输出处理后的URL
        // console.log(currentUrl);
        this.getDeviceListData()
        // this.getcommondatatype()
        
    },
    beforeDestroy () {
     if(this.panduanFlag){
        this.disconnect()
     }
     
    },
    computed: {
       optionsType(){
          return useCounterStore().mydataType
       },
    },
    

    methods: {
        searchfnname(){
            if(this.variableName === "" && this.mydata_type == ""){
                 this.leftTableCopy = JSON.parse(JSON.stringify(this.bigleftTableCopy))
                 this.total = this.bigleftTableCopy.length
                 this.currentPage = 1
                 this.leftTable = this.getCurrentPageData(this.leftTableCopy,this.currentPage,20)
            }
            if(this.variableName != "" && this.mydata_type == ""){
                this.leftTableCopy = this.bigleftTableCopy.filter(item => item.name.includes(this.variableName))
                this.total = this.leftTableCopy.length
                this.currentPage = 1
                this.leftTable = this.getCurrentPageData(this.leftTableCopy,this.currentPage,20)
            }
            if(this.variableName === "" && this.mydata_type != ""){
                this.leftTableCopy = this.bigleftTableCopy.filter(item => item.data_type == this.mydata_type)
                this.total = this.leftTableCopy.length
                this.currentPage = 1
                this.leftTable = this.getCurrentPageData(this.leftTableCopy,this.currentPage,20)
            }
            if(this.variableName != "" && this.mydata_type != ""){
                var arr1 = this.bigleftTableCopy.filter(item => item.name.includes(this.variableName))
                this.leftTableCopy = arr1.filter(item => item.data_type == this.mydata_type)
                this.total = this.leftTableCopy.length
                this.currentPage = 1
                this.leftTable = this.getCurrentPageData(this.leftTableCopy,this.currentPage,20)
            }

        },
        handleSizeChangejiao(){
            
        },
        handleCurrentChangejiao(val){
            this.currentPage=val;
            this.leftTable = this.getCurrentPageData(this.leftTableCopy,this.currentPage,20)
        },
        channelhandleCurrentChangejiao(val){
            this.channelcurrentPage=val;
            this.channelDeviceTable = this.getCurrentPageData(this.channelDeviceTableCopy,this.channelcurrentPage,20)
        },
        getCurrentPageData(dataList, page, size) {
            // 计算并返回当前页数据
            var res = dataList.slice((page-1)*size, page*size)
            return res
        },
         //获取数据类型
        getcommondatatype(){
            // commondatatype().then(res => {
            //     // console.log("数据类型",res);
            //       this.optionsType = res
            // })
        },
       
         //获取表格列表
        getfindchannelconfigAll(){
            findchannelconfigAll().then(res => {
            this.isMask = false
            if(res.code == 200){
                res.data.result.forEach((item,index) => {
                    // channel_number
                     item.treeName = item.channel_name
                     item.mytype = 'channel'
                     item.level = 2
                     item.myid = 1000000+index
                     item.channel_id = item.id
                     item.channels = this.deviceArr.filter(tt => tt.channel_number == item.channel_number)
                })
                this.caijiShebei = res.data.result
                // this.dataListCopy[0].children[0].children = res
                // this.dataList = JSON.parse(JSON.stringify(this.dataListCopy))
                // console.log("树形结构",res);
                this.getzhuanfaList()
            }
            
            }).catch(() => {
                  this.isMask = false
              })
        },
        //获取所有设备
        getDeviceListData(){
             this.isMask = true
              getDeviceList().then(res => {
                   if(res.code == 200){
                    res.data.forEach((item,index) => {
                         item.treeName = item.device_name
                         item.children = []
                         item.mytype = 'device'
                         item.level = 3
                         item.device_id = item.id
                         item.myid = 10000000+index
                    })
                       this.deviceArr = res.data
                       this.getfindchannelconfigAll()
                   }
              }).catch(() => {
                  this.isMask = false
              })
        },
         //获取转发通道列表
        getzhuanfaList(){
            // console.log("获取转发通道");
            this.isMask = true
           this.dataListCopy = [
            {
                'treeName':"数据采集",
                'channels':[
                    {
                     'treeName':"采集通道",
                     'channels':[],
                    },
                    {
                     'treeName':"转发通道",
                     'channels':[],
                    },
                ],
                "myid":1000000001
            }
           ]
           transmitChannelList().then(res => {
              this.isMask = false
            //   console.log("转发通道列表",res);
            //   return
              //扩展参数根据extend_type来判断,大于0才有扩展参数，设备信息都有
              //所属区域先定死个默认区域传0，设备组就是设备模板的模板组，设备子模板就是设备模板，设备子系列也在设备模板页面
              //设备规约就是通道规约，然后不选的话，就沿用通道的规约
              if(res.code == 200){
              var devExtendType = ""
              var agreementId = ""
              var myid = 1
               var recursiveFunction=function() {
                const getStr=function(list) {
                    list.forEach(function(row) {
                    if(row.channels && row.channels.length != 0) {
                        // console.log("有通道的协议",row);
                        devExtendType = row.extend_type
                        agreementId = row.id
                        row.channelName = row.name
                        row.treeName = row.name
                        row.myid = myid++
                        row.mytype = 'channel'
                        row.level = 1
                        getStr(row.channels)
                    } else {
                        if(row.hasOwnProperty('extend_type')) {
                        //    console.log("无通道的协议",row);
                           devExtendType = row.extend_type
                           row.channelName = row.name
                           row.treeName = row.name
                           row.mytype = 'channel'
                           row.myid = myid++
                           row.level = 1
                       }else {
                          if(row.hasOwnProperty('devices')){
                                // console.log("协议下的通道",row);
                                row.channels = row.devices
                                row.channelName = row.channel_name
                                row.treeName = row.channel_name
                                row.mytype = 'channel'
                                row.myid = myid++
                                row.level = 2
                                if(row.devices){
                                   row.channels = row.devices
                                   getStr(row.devices)
                                }
                            }else {
                                //  console.log("通道下的设备",row)
                                 row.channelName = row.device_name
                                 row.treeName = row.device_name
                                 row.level = 3
                                 row.devAgreementId = agreementId
                                 row.devType = devExtendType
                                 row.myid = myid++
                                 row.mytype = 'device'
                            }
                       } 
                    }
                    })
                }
                getStr(res.data)
                }
                recursiveFunction()
                // console.log("转发通道",res)
                 this.dataListCopy = [
                        {
                            'treeName':"数据采集",
                            'channels':[
                                {
                                'treeName':"采集通道",
                                'channels':this.caijiShebei,
                                },
                                // {
                                // 'treeName':"转发通道",
                                // 'channels':res,
                                // },
                            ],
                            "myid":1000000001
                        }
                    ]
                // this.dataListCopy[0].children[0].children = this.caijiShebei
                // this.dataListCopy[1].children[0].children = res
                // console.log("this.dataListCopy",this.dataListCopy)
                 this.dataList = JSON.parse(JSON.stringify(this.dataListCopy))
                 var arr2 = JSON.parse(JSON.stringify(this.dataListCopy))
                 arr2.forEach((item) => {
                     item.channels.forEach(tt => {
                         if(tt.treeName == '采集通道'){
                             tt.channels.forEach(it => {
                                it.devices = it.channels
                                it.channels = []
                             })
                         }else {
                             tt.channels.forEach(it => {
                                it.channels.forEach(dt => dt.channels = [])
                             })
                         }
                     })
                 })
                 this.dataListChannel = arr2
                 }
                // this.dataList[0].channels = res
           }).catch(() => {
              this.isMask = false
           })
        },
        
         //树形结构点击
        treeClick(row){
            
             this.variableName = ""
            //  console.log("树形",row);
             this.nowDeviceItem = row
             
             //以下假数据，测试通过删除
            //  this.nowDeviceItem.channel_number = 1
            //  this.nowDeviceItem.device_id = 1
             //以上假数据，测试通过删除
             if(row.mytype == 'device'){
                this.isMask = true
                // if(this.panduanFlag){
                //       this.disconnect()
                // }
                // row.device_id
                this.currentPage = 1
                 getVariablesDevice(row.device_id).then(res => {
                    //   console.log("获取变量列表",res);
                      this.isMask = false
                      if(res.code == 200){
                        var arr1 = []
                        res.data.forEach(item => {
                            item.channel_number = row.channel_number
                            item.nowTime = ""
                            item.status = ""
                            arr1 = this.optionsType.filter(tt => tt.value == item.data_type)
                            if(arr1.length != 0){
                                 item.mydata_type = arr1[0].name
                            }else {
                                 item.mydata_type = ""
                            }
                            item.device_number = row.device_number
                        })

                        // this.leftTable = res.data
                        this.leftTableCopy = JSON.parse(JSON.stringify(res.data))
                        this.bigleftTableCopy = JSON.parse(JSON.stringify(res.data))
                        this.leftTable = this.getCurrentPageData(this.leftTableCopy,this.currentPage,20)
                        // console.log("表格数据",this.leftTableCopy);
                        this.total = res.data.length
                       
                        if(!this.panduanFlag){
                            if(this.danclick){
                                return
                            }
                            this.connect()
                        }else {
                            // console.log("设备",row);
                            const params2 = `rtValueDev:${this.nowDeviceItem.device_number}`;
                            this.ws.send(params2);
                        }
                      }
                 })
             }else {
                  this.leftTable = []
                  this.total = 0
                  this.danclick = false
                //   if(this.panduanFlag){
                //       this.disconnect()
                //   }
             }
        },
        
        qiehuanTabIndex(val){
            this.tabindex = val
            this.leftTable = []
            this.channelDeviceTable = []
            this.currentPage = 1
            this.total = 0
            this.channelcurrentPage = 1
            this.channeltotal = 0

            if(this.panduanFlag){
                this.danclick = false
                this.disconnect()
            }
            
        },
        treeClickChannel(row){
            this.variableName = ""
            row.statusValue = ""
            row.nowTime = ""
            this.channelnowDeviceItem = row
            // console.log("树形",row);
            if(row.mytype && row.channel_number){
                this.channelDeviceTableCopy = JSON.parse(JSON.stringify(row.devices))
                this.channelDeviceTable =  this.getCurrentPageData(this.channelDeviceTableCopy,this.channelcurrentPage,20)
                this.channelTotal = row.devices.length
                if(!this.panduanFlag){
                     this.connect()
                }

            }
        },
        getCurrentDateTime(){
             // 获取当前时间的 Date 对象
            const now = new Date();

            // 获取年、月、日、时、分、秒
            const year = now.getFullYear();
            const month = now.getMonth() + 1; // 月份从 0 开始，需要加 1
            const day = now.getDate();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            // 格式化月份和日期，确保两位数
            const formattedMonth = month < 10 ? '0' + month : month;
            const formattedDay = day < 10 ? '0' + day : day;
            const formattedHours = hours < 10 ? '0' + hours : hours;
            const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
            const formattedSeconds = seconds < 10 ? '0' + seconds : seconds;

            // 组合成字符串
            return `${year}-${formattedMonth}-${formattedDay} ${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
        },

        //转发通道
        connect() {
            // 创建WebSocket连接
            // 65534 设备状态  65535 通道状态 value值为0是不在线
            if(import.meta.env.MODE == 'development'){
                this.ws = new WebSocket('ws://192.168.1.211:8080/v1/ws/');
            }else {
                // this.ws = new WebSocket(`ws://${this.newbaseUrl}:8080/v1/ws/`)
                this.ws = new WebSocket(`ws://${this.newbaseUrl}:9998/server`)
                // ws://0.0.0.0:9999/server
            }
            this.danclick = true
            // this.ws = new WebSocket(`ws://${this.newbaseUrl}:8080/v1/ws/`);
            // 连接关闭时的事件
            this.ws.onclose = (event) => {
                // console.log('WebSocket连接已关闭：', event);
            };
            
            
            // 连接打开时的事件
            this.ws.onopen = (event) => {
                // console.log('WebSocket连接已打开：', event);
                clearTimeout(this.changshi)
                if(event.type == 'open'){
                    // console.log("成功");
                    this.sendMessage()
                }
            };

            // 接收到消息时的事件
            this.ws.onmessage = (event) => {
                this.panduanFlag = true
                if(event.data == 'expectation: [actulValue / monitor / close]'){
                    return
                }
                if(event.data == 'ok'){
                    return
                }
                if(event.data == 'error'){
                    this.$message({showClose: true,message: '连接失败',type: 'error'});
                     return
                }
                // if(event.data == 'ping...'){
                //     return
                // }
                if(event.data[0] != '{'){
                    return
                }
                var resData = JSON.parse(event.data)
                
                if(this.tabindex == 1){
                    if(this.nowDeviceItem.device_number != resData.device_id ){
                        return
                    }
                    if(this.leftTable.length != 0){
                        var myindex1 = -1
                        var myindex2 = -1
                        this.leftTable.forEach(tt => {
                                resData.data.forEach(item => {
                                        if(tt.data_number == item.data_id){
                                            tt.value = item.value.toFixed(3)
                                            tt.status = item.status
                                            tt.type = item.type
                                            tt.nowTime = item.time
                                        } 
                                })
                            })
                        resData.data.forEach(item => {
                                myindex1 = this.leftTableCopy.findIndex(tcopy => tcopy.data_number == item.data_id)
                                myindex2 = this.bigleftTableCopy.findIndex(tcopy => tcopy.data_number == item.data_id)
                                if(myindex1 != -1){
                                    this.leftTableCopy[myindex1].value = item.value.toFixed(3)
                                    this.leftTableCopy[myindex1].status = item.status
                                    this.leftTableCopy[myindex1].type = item.type
                                    this.leftTableCopy[myindex1].nowTime = item.time
                                }
                                if(myindex2 != -1){
                                    this.bigleftTableCopy[myindex2].value = item.value.toFixed(3)
                                    this.bigleftTableCopy[myindex2].status = item.status
                                    this.bigleftTableCopy[myindex2].type = item.type
                                    this.bigleftTableCopy[myindex2].nowTime = item.time
                                }
                        })
                            
                    }
                }else {
                    
                    if(this.channelnowDeviceItem.channel_number != resData.channel_id){
                        return
                    }
                    if(this.channelDeviceTable.length != 0){
                        var arr1 = []
                        var arr2 = resData.data.filter(tt => tt.data_id == '65535')
                        if(arr2.length != 0){
                            this.channelnowDeviceItem.statusValue = arr2[0].value
                            this.channelnowDeviceItem.nowTime = arr2[0].time
                        }
                        this.channelDeviceTable.forEach(item => {
                             if(item.device_number == resData.device_id){
                                 arr1 = resData.data.filter(tt => tt.data_id == '65534')
                                 if(arr1.length != 0){
                                     item.value = arr1[0].value
                                     item.nowTime = arr1[0].time
                                 }
                             }
                        })
                        // console.log("通道设备状态",resData,this.channelDeviceTable);
                    }
                }

            };
          

            
            // 连接出错时的事件
            this.ws.onerror = (error) => {
                // console.error('WebSocket连接出现错误：', error);
                this.$message({showClose: true,message: '通讯异常，5秒后尝试重连',type: 'error'});
                if (this.ws) {
                    this.ws.close();
                    this.ws = null;
                    this.panduanFlag = false
                    // this.lianjieTitle = '连接'
                    clearTimeout(this.changshi)
                    this.changshi = setTimeout(() => {
                        this.connect()
                    },5000)
                }
            };
        },
        //发送信息
        sendMessage() {
                // 发送消息
                if (this.ws && this.ws.readyState === WebSocket.OPEN) {
                    // 假设我们要发送的参数是一个对象
                    const params = 'rtValue';
                    const params2 = `rtValueDev:${this.nowDeviceItem.device_number}`;
                    this.ws.send(params);
                    if(this.tabindex == 1){
                        this.ws.send(params2);
                    }
                    
                    // this.ws.send(params);
                    // console.log('发送消息：', params);
                } else {
                    // console.log('WebSocket连接未打开，无法发送消息');
                }
        },
        //关闭连接
        disconnect() {
                // 断开WebSocket连接
                if (this.ws) {
                    const params = 'close';
                    this.ws.send(params);
                    this.ws.close();
                    this.ws = null;
                    this.panduanFlag = false
                }
        },

       
    },
};
</script>

<style lang="scss" scoped>
.variableediting {
     position: relative;
}
.topcon  { 
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left-nav {
         display: flex;
         .nav-item {
             width: 96px;
             height: 34px;
             text-align: center;
             line-height: 36px;
             cursor: pointer;
             border: 1px solid #E6E6E6;
             color: #666666;
             
             &.active {
                 background-color: #fff;
                 color: #1A1A1A;
                 border-color: transparent;
             }
         }
    }
    .right-btn { 
        display: flex;
    }
    
}
.channelstate {
     margin-top: 10px;
     padding-left: 12px;
     box-sizing: border-box;
     display: flex;
     align-items: center;
     span.leftname {
         font-size: 14px;
         color: #1A1A1A;
     }
     div {
        font-size: 14px;
     }
}
 .btn-item {
             min-width: 72px;
             width: 72px;
             height: 28px;
             text-align: center;
             line-height: 28px;
             font-size: 12px;
             background-color: #2178F1;
             color: #FFF;
             border-radius: 4px;
             cursor: pointer;
        }
        .item1 {
             background-color: #E7F0FF;
             border: 1px solid #2178F1;
             color: #2178F1;
             box-sizing: border-box;
             margin-left: 8px;
        }
.con {
     width: 100%;
     height: calc(100% - 36px);
     background-color: #fff;
     box-sizing: border-box;
     padding: 12px 0px 0px 12px;
     display: flex;
     .left-tree {
         width: 260px;
         height: 100%;
         border-right: 1px solid #E6E6E6;
         padding-right: 12px;
         box-sizing: border-box;

     }

     .right-table {
         width: calc(100% - 260px);
         height: calc(100% - 36px);
         box-sizing: border-box;
         .top-search {
             width: 100%;
             height: 28px;
             display: flex;
             padding-left: 12px;
             box-sizing: border-box;
            
             .search-con {
                  width: 100%;
                   height: 28px;
                  display: flex;
             }
             .search-item {
                display: flex;
                align-items: center;
                 height: 28px;
                 margin-right: 12px;
               
                 :deep(.el-input__inner){
                    height: 28px;
                    line-height: 28px;
                }
                .leftname {
                     margin-right: 8px;
                     color:#1A1A1A !important;
                }
             }
         }
         .lines {
             width: 100%;
             height: 1px;
             background-color: #E6E6E6;
             margin: 12px 0px;
         }
        .mi-table {
               width: 100%;
                height: calc(100% - 24px);
                margin-left: 12px;
                margin-bottom: 10px;
                padding-right: 12px;
                 box-sizing: border-box;
                :deep(.el-input__inner) {
                     height: 28px;
                     line-height: 28px;
                 }
                 :deep(.el-input__icon ){
                     line-height: 28px;
                 }
               
                 .mysort {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                 }
                 :deep(.el-table__fixed-right ){
                         bottom: 9px !important;
                 }
                 :deep(.el-switch.is-checked .el-switch__core) {
                     width: 24px !important;
                     height: 12px;
                 }
                 :deep(.el-switch__core) {
                       width: 24px !important;
                     height: 12px;
                 }
                 :deep(.el-switch.is-checked .el-switch__core::after) {
                     margin-left: -10px;
                 }
                 :deep(.el-switch__core:after) {
                          top: 0px;
                          width: 10px;
                          height: 10px;
                 }
             }
        .bot-btn {
             width: 100%;
             height: 47px;
            //  margin-top: 44px;
             border-top: 1px solid #E6E6E6;
             .scr-div {
                width: 100%;
                height: 48px;
                display: flex;
                align-items: center;
                justify-content: space-between;
             }
             
        }
        .right-paging {
             position: relative;
             :deep(.el-pagination__sizes) {
                    // position: absolute;
                    // right: 0;
                    // top: 3px;
                    margin-right: 0px;
                    .el-input__inner {
                         border-radius: 4px !important;
                    }
                   
             }
             :deep(.el-pagination__total) {
                 color: #999999;
                 margin-right: 1px;
             }
             :deep(.el-pager) {
                    li {
                                margin: 0px 2px !important;
                            }
                   .number,.el-icon-more {
                      background-color: #fff;
                    border: 1px solid #E6E6E6;
                    box-sizing: border-box;
                      border-radius: 4px;
                   }
                    
             }
             :deep(.el-pagination.is-background .btn-next) {
                background-color: #fff;
                border: 1px solid #E6E6E6;
                box-sizing: border-box;
                border-radius: 4px;
                i {
                    color: #666666;
                }
             }
              
             :deep(.btn-next) {
                    margin-right: 106px;
             }
        }
     }

}
.drawer-con {
      width: 100%;
      height: 100%;
       .drawer-top {
          width: 100%;
          height: 52px;
          padding: 20px 20px 0px 20px;
          box-sizing: border-box;
          border-bottom: 1px solid #EBEBEB;
          display: flex;
          justify-content: space-between;
          span {
             color: #1A1A1A;
             font-size: 16px;
          }
          i {
             font-size: 20px !important;
             position: relative;
             top: 2px;
              cursor: pointer;
          }
       }
       .drawer-middle {
          width: 100%;
          height: calc(100% - 116px);
          padding: 20px;
          box-sizing: border-box;
       }
       .drawer-bottom {
         width: 100%;
         height: 64px;
         border-top: 1px solid #E0EDFF;
         padding-top: 12px;
         box-sizing: border-box;
         display: flex;
         justify-content: center;
       }
}
.quxiao {
                         margin-left: 8px;
                         color: #666666;
                         background-color: #fff;
                         border: 1px solid #cccccc;
}
.xiaotitle {
     width: 100%;
     font-size: 12px;
     color: #333333;
     display: flex;
     align-items: center;
     margin-bottom: 12px;
     span {
         display: inline-block;
         width: 2px;
         height: 12px;
         background-color: #2178F1;
         margin-right: 6px;
     }
}
.input-item {
     display: flex;
     align-items: center;
     width: 100%;
     height: 44px;
     .leftname {
         width: 72px;
         text-align: right;
         font-size: 12px;
         color: #666666;
         margin-right: 8px;
         span {
             color: #FF0000;
             margin-right: 1px;
         }
     }
     :deep(.el-input__inner){
         height: 28px;
         line-height: 28px;
     }
     .tips {
          font-size: 12px;
          color: #666666;
          margin-left: 8px;
     }
     

}
.check-item {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     .input-item {
         width: 50%;
     }
}
.check-item2 {
      width: 100%;
     display: flex;
     flex-wrap: wrap;
     .input-item {
         width: 25%;
     }
}
 .bot-btn {
            width: 100%;
            height: 60px;
            display: flex;
            padding: 0px 12px;
            align-items: center;
            box-sizing: border-box;
            .scr-div {
                 width: 100%;
                  height: 60px;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }
 }
 .left-btn {
             display: flex;
             align-items: center;
 }
  .btn-items { 
                width: 84px;
                // padding: 0px 8px;
                box-sizing: border-box;
                height: 28px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 4px;
                // box-sizing: border-box;
                img {
                     margin-left: 4px;
                }
 }
  .qi-btn {
                border: 1px solid #2178F1;
                color: #2178F1;
             }
             .del-btn {
                border: 1px solid #EE422B;
                color: #EE422B;
             }
</style>